<template>
  <uv-navbar :fixed="false" :title="title" left-arrow @leftClick="$onClickLeft" />
  <view class="container" style="padding:20rpx;">
    <view style="padding-bottom: 100rpx;">
      <view class="bg-white">
        <!-- 商品列表 -->
        <view class="section">
          <list-cell :hover="false" padding="30rpx 30rpx">
            <view class="w-100 d-flex flex-column position-relative">
              <view class="w-100 d-flex align-items-center mb-40" v-for="(good, index) in cartList"
                    :key="index">
                <image :src="good.image" mode="aspectFill" class="image"></image>
                <view class="d-flex flex-column w-60 overflow-hidden">
                  <view class="font-size-lg text-color-base mb-10 text-truncate">{{ good.title }}</view>
                  <view class="font-size-sm text-color-assist text-truncate">份</view>
                </view>
                <view class="d-flex w-40 align-items-center justify-content-between pl-30">
                  <view class="font-size-base text-color-base">x{{ good.number }}</view>
                </view>
              </view>
            </view>
          </list-cell>
        </view>
        <!-- 订单信息 -->
        <view class="section">
          <list-cell :hover="false" padding="50rpx 30rpx">
            <view class="w-100 d-flex flex-column">
              <view class="pay-cell">
                <view>下单时间</view>
                <view class="font-weight-bold">{{ formatDateTime(order.created_at * 1000) }}</view>
              </view>
              <view class="pay-cell">
                <view>订单号</view>
                <view class="font-weight-bold">{{ order.order_sn }}</view>
              </view>
            </view>
          </list-cell>
        </view>
        <!-- 订单其他信息 -->
        <list-cell :hover="false" padding="50rpx 30rpx 20rpx" last>
          <view class="w-100 d-flex flex-column">
            <view class="pay-cell">
              <view>备注</view>
              <view class="font-weight-bold">{{ order.remark ? order.remark : '无' }}</view>
            </view>
          </view>
        </list-cell>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { formatDateTime } from '@/utils/util'
import { orderDetail } from '@/api/order'

const title = ref('订单详情')
const order = ref({})
const cartList = ref([])

onLoad((option) => {
  detail(option.id)
})

/**
 * 获取订单详情
 * @param {string} id - 订单ID
 */
const detail = async (id) => {
  const data = await orderDetail({ order_sn: id })
  if (data) {
    order.value = data.order
    cartList.value = data.cart_list
  }
}
</script>

<style lang="scss" scoped>
.image {
  width: 120rpx;
  height: 120rpx;
  margin-right: 30rpx;
  border-radius: 8rpx;
}

.pay-cell {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: $font-size-base;
  color: $text-color-base;
  margin-bottom: 40rpx;

  &:nth-last-child(1) {
    margin-bottom: 0;
  }
}

@mixin arch {
  content: "";
  position: absolute;
  background-color: $bg-color;
  width: 30rpx;
  height: 30rpx;
  bottom: -15rpx;
  z-index: 10;
  border-radius: 100%;
}

.section {
  position: relative;

  &::before {
    @include arch;
    left: -15rpx;
  }

  &::after {
    @include arch;
    right: -15rpx;
  }
}
</style>
